<template>
	<view class="apply">
		<view class="goods">
			<view class="goods-info">
				<view class="goods-img">
					<image :src="goods.original_image" mode=""></image>
					
				</view>
				<view class="goods-name">{{goods.goods_name}}</view>
				<view class="spec-name">{{goods.spec_name}}</view>
			</view>
		</view>
		
		<view class="types">
			<view class="uni-list">
				<view class="uni-list-cell" v-if="get_datas.after_type != 3" @tap.prevent="showMask=show_mask_goods=true">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>货物状态</view>
						<view class="tips">{{goods_status_tips}}</view>
					</view>
				</view>
				
				<view class="uni-list-cell" v-if="get_datas.after_type != 3" @tap.prevent="showMask=show_mask_return=true">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>退款原因</view>
						<view class="tips">{{return_reason_tips}}</view>
					</view>
				</view>
				
				<view class="uni-list-cell" v-if="get_datas.after_type == 3" @tap.prevent="showMask=show_mask_exchange=true">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>换货原因</view>
						<view class="tips">{{exchange_reason_tips}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退款不可更换金额，退款退货可更改金额，换货不显示 -->
		<view class="uni-list"  v-if="get_datas.after_type != 3">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate return-amount">
					<view class="amount-tips">
						退款金额: 
					</view>
					<view class="amount-input-div">
						￥
						<input type="digit" v-if="get_datas.after_type == 1" class="amount-input disabled-amount" v-model="return_amount" disabled="disabled"/>
						<input type="digit" :focus="true" class="amount-input" v-else v-model="return_amount"/>
					</view>
				</view>
			</view>
			<view class="uni-list-cell text-gray">
				<view class="uni-list-cell-navigate">
					最多￥{{goods.price+goods.freight}}，含邮费{{goods.freight}}元
				</view>
			</view>
		</view>
		
		<view class="uni-list"  v-if="get_datas.after_type != 1">
			<view class="uni-list-cell" @tap.prevent="showMask=show_shippins=true">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view>快递公司</view>
					<view class="tips">{{shipping_tips}}</view>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate return-amount">
					<view>快递单号</view>
					<view>
						<input type="text" v-model="shipping_no" class="remark-input" placeholder="请填写快递单号" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-list"  >
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate return-amount">
					<view>退款说明</view>
					<view>
						<input type="text" v-model="content" class="remark-input" placeholder="选填" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="upload-box">
			<vie class="title">上传凭证</vie>
			<view class="upload-img">
				<view class="item" v-for="(img, imgIndex) in images" :key="imgIndex">
					<image :src="img" mode="aspectFill"></image>
				</view>
				<view class="item upload">
					<image src="../../static/upload_icon.png" @tap="uploadImg(index)"  mode="aspectFill"></image>
					
				</view>
			</view>
		</view>
		

		
		<view class="fixed-bottom-btn" @tap="submit_apply()">提交</view>

		<mask-select :show="show_mask_goods" @hidePopup="hide_mask()" title="货物状态">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_goods(item)" v-for="(item,index) in goods_status" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.name}}</view>
						<view class="select-icon">
							<image :src="goods_status_id == item.id?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
		
		<mask-select :show="show_mask_return" @hidePopup="hide_mask()" title="退款原因">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_return(item)" v-for="(item,index) in return_money_reason" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.name}}</view>
						<view class="select-icon">
							<image :src="return_reason_id == item.id?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
		
		<mask-select :show="show_mask_exchange" @hidePopup="hide_mask()" title="换货原因">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_exchange(item)" v-for="(item,index) in exchange_reason" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.name}}</view>
						<view class="select-icon">
							<image :src="exchange_reason_id == item.id?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
		<mask-select :show="show_shippins" @hidePopup="hide_mask()" title="快递公司">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_shipping(item)" v-for="(item,index) in shippings" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">{{item.name}}</view>
						<view class="select-icon">
							<image :src="shipping_id == item.id?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import maskSelect from '../../components/mask-select.vue';
	
	export default {
		components: {
			maskSelect
		},
		data() {
			return {
				get_datas: {},
				goods:'',//退款商品信息
				showMask: false, //显示弹窗
				show_mask_goods: false, //显示货物状态列表
				show_mask_return: false, //显示退款原因列表
				show_mask_exchange: false, //显示换货原因列表
				show_shippins: false, //显示物流列表
				goods_status: [], //货物状态列表
				return_money_reason: [], //退款原因列表
				exchange_reason: [], //换货原因列表
				shippings: [], //快递列表
				goods_status_tips: '请选择', //
				return_reason_tips: '请选择',
				exchange_reason_tips: '请选择',
				goods_status_id: '', //选择的货物状态ID
				return_reason_id: '', //选择的退款原因ID
				exchange_reason_id: '', //选择的换货原因ID
				return_amount: 0, //退款金额
				max_amount: 0, //最大申请金额
				content: '', //售后说明 
				images: [], //图片凭证
				shipping_no: '', //快递单号
				shipping_id: '', //快递ID
				shipping_tips: '请选择',
			};
		},
		onLoad(e) {
			this.get_datas = e;
			this.check_status();
		},
		methods: {
			//检查订单商品状态
			check_status: function(){
			    var that = this;
				Request.send({
					url: 'after_sales/check',
					data: {
						order_id: that.get_datas.order_id,
						item_id: that.get_datas.item_id
					},
					sCallback: function(res) {
						if(res.code == 200){
						    that.goods = res.data.goods;
						    that.goods_status = res.data.goods_status;
						    that.return_money_reason = res.data.return_money_reason;
						    that.exchange_reason = res.data.exchange_reason;
						    that.shippings = res.data.shippings;
						    if(that.get_datas.after_type != 3) {
						        var total_amount = that.goods.price+that.goods.freight;
						        that.return_amount = total_amount;
						        that.max_amount = total_amount;
						        
						    }
						} else if(res.code == 201) {
						    //存在示完成售后，到售后详情
							uni.redirectTo({
								url: '/pages/aftersales/detail?id='+res.data.id
							})
						} else {
						    Request.alert(res.msg, () => {
						        uni.navigateBack({
						        	
						        })
						    })
						}
					}
				})
			    
			},
			//隐藏mask
			hide_mask: function(){
				this.showMask = this.show_mask_exchange = this.show_mask_return = this.show_mask_goods = this.show_shippins = false;
			},
			//选择商品状态
			select_goods: function(item){
				this.goods_status_tips = item.name;
				this.goods_status_id = item.id;
				//隐藏弹窗
				this.hide_mask();
			},
			//选择退货款原因
			select_return: function(item){
				this.return_reason_tips = item.name;
				this.return_reason_id = item.id;
				this.hide_mask();
			},
			//选择换货原因
			select_exchange: function(item){
				this.exchange_reason_tips = item.name;
				this.exchange_reason_id = item.id;
				this.hide_mask();
			},
			//选择快递公司
			select_shipping: function(item) {
				this.shipping_id = item.id;
				this.shipping_tips = item.name;
				this.hide_mask();
			},
			//提交申请
			submit_apply: function(){
				var after_type = this.get_datas.after_type;
				var images = this.images.toString();
				var postData = {
					
					item_id: this.get_datas.item_id,
					type: after_type,
					amount: this.return_amount,
					content: this.content,
					images: images,
					shipping_no: this.shipping_no,
					shipping_id: this.shipping_id,
					goods_status_id: this.goods_status_id,
					return_id: this.return_reason_id,
					exchange_id: this.exchange_reason_id
				}
				console.log(postData);

				if(!this.goods_status_id && (after_type == 1 || after_type == 2)) {
					Request.alert('请选择货品状态');return;
				}


				if(!postData.return_id && (after_type == 1 || after_type == 2)) {
					Request.alert('请选择退款原因');return;
				}

				if(after_type ==3 && !postData.exchange_id) {
					Request.alert('请选择换货原因');return;
				}

				if(after_type == 2 && this.return_amount > this.max_amount) {
					Request.alert('最多申请退款'+this.max_amount+'元');return;
				}

				if(after_type == 2 || after_type == 3) {
					if(!this.shipping_id) {
						Request.alert('请选择快递公司');return;	
					}

					if(!this.shipping_no) {
						Request.alert('请填写快递单号');return;
					}
				}
				
				Request.send({
					url: 'after_sales/apply',
					data: postData,
					sCallback: function(res) {
						Request.alert(res.msg, (res) => {
							uni.redirectTo({
								url: '/pages/aftersales/index'
							})
						})
					}
				})
				
			},
			//上传图片
			uploadImg: function() {
				var imgs = this.images;
				if(imgs.length >= 3) {
				    Request.alert('最多上传3张');
				    return;
				}
				var that = this;
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'],
					success(obj) {
						console.log(obj);
						Request.uploadImg({
							data: obj.tempFilePaths[0],
							sCallback: function(res) {
								that.images.push(res.data.url);
							}
						})
					},
					fail(e) {
						console.log('err');
						console.log(e);
						Request.alert('图片选择出错');
					}
				})
				
			}
		}
	}
</script>

<style>
	.apply{
		margin-bottom: 100upx;
	}
	
	.goods-info{
		display: flex;
		flex-direction: row;
		padding: 20upx;
		background: #fff;
		margin-bottom: 10upx;
	}
	
	.goods-info .goods-img image{
		width: 120upx;
		height: 120upx;
	}
	
	.goods-info .goods-name{
		color: #666;
		padding-left: 20upx;
	}
	
	.uni-list{
		margin-bottom: 20upx;
	}
	
	.uni-list .tips{
		margin-right: 20upx;
		color: #666;
	}
	
	.upload-box{
		background: #fff;
		
	}
	
	.upload-box .title{
		padding: 20upx;
	}
	
	.upload-img{
		display: flex;
		flex-direction: row;
	}
	
	.upload-img .item{
		width: 180upx;
		height: 180upx;
		
		padding: 10upx;
	}
	
	.upload-img .item image{
		max-height: 160upx;
		max-width: 160upx;
	}
	
	.account-item .logo, .account-item .select-icon{
		display: flex;
		align-items: center;
	}
	
	.account-item .select-icon image{
		width: 60upx;
		height: 60upx;
	}
	
	.return-amount{
		justify-content: flex-start;
	}
	
	.return-amount>view:nth-child(2){
		display: flex;
		flex-direction: row;
		padding-left: 10upx;
		align-items: center;
		flex: 1;
	}
	
	.return-amount input{
		flex: 1;
	}
</style>
